<template>
  <div class="touying">
    <div ref="chart" class="thechart"></div>
    <!-- <div class="label">{{labelInfo}}</div> -->
    <!-- <div class="label2">{{labelInfo2}}</div> -->
  </div>
</template>
<style lang="less" scoped>
.thechart {
  width: 1900px;
  height: 800px;
}
.touying {
  .label {
    display: inline-block;
    position: absolute;
    top: 500px;
    left: 130px;
    color: #7d0532;
    font-stretch: ultra-expanded;
  }
}
</style>
<script>
import axios from "axios";
import randomcolor from "randomcolor";
import Color from "color";
import { round, min, max } from "lodash";
// const lodash  = require("lodash");
let clipboardjs = require("clipboard");
const libDP = require("../lib/Douglas-Peucker");
import * as echarts from "echarts";
const MAP_IMAGES = {
  Vikendi:
    "http://n1-q.mafengwo.net/s16/M00/1F/16/CoUBUl6J6-WAfTq9ABN1dkMMLI4971.jpg#DihorOtok_Main",
  "Erangel (Remastered)":
    "http://n1-q.mafengwo.net/s16/M00/24/CD/CoUBUl6J8CGAZ8FWACwGssFmNzs911.jpg#Baltic_Main.jpg.jpg",
  Miramar:
    "http://b1-q.mafengwo.net/s16/M00/25/07/CoUBUl6J8DuABPwhAB3VGbsEWx0692.jpg#Desert_Main.jpg.jpg",
  Erangel:
    "http://n1-q.mafengwo.net/s16/M00/25/14/CoUBUl6J8E-AbIDmABcvo6NWiPE512.jpg#Erangel_Main.jpg.jpg",
  Sanhok:
    "https://qimage.owhat.cn/prod/master/image/e998aac9-462c-46ce-9c96-0e9506af0da5#Sanhok_Main_High_Res.jpg"
};
const MAP_LENGTH_CENTIMETERS = {
  Vikendi: 612000,
  "Erangel (Remastered)": 816000,
  Miramar: 816000,
  Erangel: 816000,
  Sanhok: 408000
};

const MAP_NAME = "Sanhok";
const MapGameLength = MAP_LENGTH_CENTIMETERS[MAP_NAME];
const MapSize = 1000;
let _scale = MapSize / MapGameLength;

export default {
  name: "Touying",
  data() {
    return {
      labelInfo: " ",
      labelInfo2: "888888",
      chart: null
    };
  },
  async mounted() {
    let vue = this;
    let ele = this.$refs["chart"];
    let chart = echarts.init(ele, "", {
      renderer: "canvas"
    });
    // this.chart = chart;

    let grid_sssssize = 450;
    let serieses = await this.getSerieses();
    var schema = [
      // { name: "killed", index: 0, text: "玩家被杀" },
      { name: "distance_min", index: 0, text: "距城最小距离" },
      { name: "is_in_zone", index: 1, text: "在城内" },
      { name: "distance_a", index: 2, text: "距离A" },
      { name: "distance_b", index: 3, text: "距离B" },
      { name: "distance_c", index: 4, text: "距离C" },
      { name: "distance_d", index: 5, text: "距离D" },
      { name: "distance_to_others", index: 6, text: "离敌距离" },
      { name: "distance_to_airline", index: 7, text: "航线距离" },
      { name: "safetyzone_value", index: 8, text: "安全区计量值" },
      { name: "ranking", index: 9, text: "队伍排名" }
    ];
    chart.setOption({
      backgroundColor: "transparent" || "white",
      color: ["#c23531", "#91c7ae", "#dd8668"],
      tooltip: {
        trigger: "item"
      },
      brush: {
        brushLink: "all",
        xAxisIndex: [0, 1],
        yAxisIndex: [0, 1],
        inBrush: {
          opacity: 1,
          colorSaturation: 1
        },
        outOfBrush: {
          opacity: 0.1,
          symbolSize: 8,
          colorSaturation: 0
        },
        throttleType: "debounce",
        throttleDelay: 1000,
        brushStyle: {
          borderWidth: 1,
          color: "rgba(0,0,180,0.2)",
          borderColor: "rgba(120,140,180,0.8)"
        }
      },
      dataZoom: [
        { type: "inside", xAxisIndex: [0], filterMode: "none" },
        { type: "inside", yAxisIndex: [0] }
      ],
      parallel: {
        // left: "15px",
        background: "white",
        left: "590",
        height: grid_sssssize,
        top: 25,
        width: 800
        // layout: "vertical"
      },
      parallelAxis: [
        // {
        //   dim: 0,
        //   name: schema[0].text,
        //   inverse: true,
        //   nameLocation: "end"
           
        // },
        // {
        //   dim: 1,
        //   name: schema[1].text,
        //   nameLocation: "end",
        //   inverse: true,
        //   type: "category",
        //   data: ["true", "false"]
        // },
        { dim: 2, name: schema[2].text, nameLocation: "end", inverse: true },
        { dim: 3, name: schema[3].text, nameLocation: "end", inverse: true },
        { dim: 4, name: schema[4].text, nameLocation: "end", inverse: true },
        { dim: 5, name: schema[5].text, nameLocation: "end", inverse: true },
        {
          dim: 6,
          name: schema[6].text,
          // max: 100,
          minInterval: 5,
          splitNumber: 5,
          nameLocation: "end",
          inverse: true
        },
        {
          dim: 7,
          name: schema[7].text,
          nameLocation: "end",
          inverse: true
          // type: "category",
          // data: ["true", "false"]
        },
        { dim: 8, name: schema[8].text, nameLocation: "end", inverse: true },
        {
          dim: 9,
          name: schema[9].text,
          nameLocation: "end",
          inverse: true,
          min: 1
        }
      ].map(e => {
        e.axisLine = {
          lineStyle: {
            color: "black"
          }
        };
        return e;
      }),
      grid: [
        {
          left: 30,
          // right: 10,
          // bottom: 300,
          top: 10,
          width: grid_sssssize,
          height: grid_sssssize
        },
        {
          right: 0,
          top: 30,
          width: grid_sssssize,
          height: grid_sssssize,
          show: true
        }
      ],
      xAxis: [
        {
          type: "value",

          splitLine: {
            show: false
          },
          axisLine: {},
          gridIndex: 0
        },
        {
          type: "value",
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          max: MapGameLength,
          inverse: false,
          gridIndex: 1
        }
      ],
      yAxis: [
        {
          type: "value",

          splitLine: {
            show: false
          },
          axisLine: {},
          gridIndex: 0
        },
        {
          type: "value",
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          max: MapGameLength,
          inverse: true,
          gridIndex: 1
        }
      ],
      series: [...serieses]
    });
    let tsneData = await this.ajaxDataTsne();
    chart.on("brushselected", params => {
      if (
        params.batch.length &&
        params.batch[0].selected.length &&
        params.batch[0].selected[0].dataIndex.length
      ) {
        let selectedIndexes = params.batch[0].selected[0].dataIndex;
        let selectedItems = tsneData.filter((e, i) =>
          selectedIndexes.includes(i)
        );
        let qianwuCount = selectedItems.filter(e => e.ranking <= 5).length;
        let chijiCount = selectedItems.filter(e => e.ranking <= 1).length;
        // let
        let labelInfo = `前五率：${round(
          (qianwuCount / selectedItems.length) * 100,
          2
        )}% | 吃鸡率：${round((chijiCount / selectedItems.length) * 100, 2)}%`;
        // debugger;
        this.labelInfo = labelInfo;
        // debugger;
        let logs = [];
        let attrs = [
          "distance_to_airline",
          "distance_to_city_type_a",
          "distance_to_city_type_b",
          "distance_to_city_type_c",
          "distance_to_city_type_d",
          "distance_to_others",
          "safetyzone_value"
        ];
        for (let attr of attrs) {
          let vals = selectedItems.map(e => e[attr]);
          let maxed = max(vals);
          let mined = min(vals);
          // attrs[attr]  = [mined,maxed]
          logs.push(`${attr}:FROM ${mined} to ${maxed}`);
        }
        // debugger
        this.labelInfo2 = logs.map(e => `【${e}】`).join("\n");
      } else {
        this.labelInfo = "";
      }
    });
  },
  methods: {
    ajaxDataTsne() {
      let points =
        "https://qimage.owhat.cn/prod/master/image/8bd242c5-4c50-4f7a-9b48-b6b19b9f302c";
      points =
        "https://qimage.owhat.cn/prod/master/image/252b9bf2-9f0e-416c-80be-47aa5ea20761";
      points =
        "https://qimage.owhat.cn/prod/master/image/6c1b3f82-2053-411e-951d-b19f7e3b5404";
      return new Promise(resolve => {
        axios
          .get(points)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajaxDataPca() {
      let points =
        "https://qimage.owhat.cn/prod/master/image/1a6bbed0-fc2a-41d9-a592-4e6e9ed1c216";

      return new Promise(resolve => {
        axios
          .get(points)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    async getSerieses() {
      let dataTsne = await this.ajaxDataTsne();
      let seriesTsne = {
        name: "tsne",
        type: "scatter",
        data: dataTsne
          // .slice(0, 2000)
          .map(e => [e.tsne[0], e.tsne[1], e.ranking <= 5]),
        itemStyle: {
          borderWidth: 0,
          borderColor: "white",
          color: params => {
            return "red";
            if (params.value[2]) {
              return "red";
            }
            return "rgba(0,0,0,0.3)";
          },
          opacity: 0.9
        },
        symbolSize: 3,
        silent: true,
        animation: false
      };

      let seriesPingxing = {
        name: "pingxing",
        type: "parallel",
        smooth: 0.1,
        lineStyle: {
          width: 1,
          color: "rgba(197,56,52,0.1)"
          // opacity: 0.1
        },
        inactiveOpacity: 0,
        activeOpacity: 0.2,
        emphasis: {
          lineStyle: {
            color: "green"
          }
        },
        data: dataTsne.map(e => [
          Math.min(
            e.distance_to_city_type_a,
            e.distance_to_city_type_b,
            e.distance_to_city_type_c,
            e.distance_to_city_type_d
          ),
          String(e.is_in_zone),
          e.distance_to_city_type_a,
          e.distance_to_city_type_b,
          e.distance_to_city_type_c,
          e.distance_to_city_type_d,
          e.distance_to_others,
          e.distance_to_airline,
          e.safetyzone_value,
          e.ranking
          // String(Boolean(e.is_gaoshou))
        ])
      };
      let seriesLuodianInDitu = {
        name: "dituluodian",
        type: "scatter",
        data: dataTsne.map(e => [e.luodian.x, e.luodian.y]),
        symbolSize: 3,
        silent: true,
        animation: false,
        xAxisIndex: 1,
        yAxisIndex: 1
      };
      let dataPca = await this.ajaxDataPca();
      let seriesPca = {
        name: "pca",
        type: "scatter",
        data: dataPca
          // .slice(0, 2000)
          .map(e => [e.pca[0], e.pca[1]]),
        itemStyle: {
          borderWidth: 0,
          borderColor: "white",
          color: params => {
            return "blue";
            if (params.value[2]) {
              return "red";
            }
            return "rgba(0,0,0,0.3)";
          },
          opacity: 0.9
        },
        symbolSize: 3,
        silent: true,
        animation: false
      };
      let seriesBackground = {
        name: "map-background",
        type: "custom",
        data: [[408000, 0]],
        coordinateSystem: "cartesian2d",
        xAxisIndex: 1,
        yAxisIndex: 1,
        z: -1,
        silent: true,
        renderItem: function(params, api) {
          let x = [408000, 408000];
          // debugger
          let coord1 = api.coord([0, 0]);
          let coord2 = api.coord([408000, 408000]);
          return {
            type: "group",
            children: [
              {
                type: "rect",
                shape: {
                  x: coord1[0],
                  y: coord1[1],
                  width: coord2[0] - coord1[0],
                  height: coord2[1] - coord1[1]
                },
                style: {
                  stroke: "blue",
                  lineWidth: 0.1,
                  fill: "rgba(202,202,235,0)"
                }
              },
              {
                type: "image",
                style: {
                  image: MAP_IMAGES[MAP_NAME],
                  x: coord1[0],
                  y: coord1[1],
                  width: coord2[0] - coord1[0],
                  height: coord2[1] - coord1[1]
                  // fill:"blue"
                }
              }
            ]
          };
        },
        itemStyle: {
          opacity: 0
        }
      };
      return [
        seriesTsne,
        seriesPingxing,
        seriesBackground,
        seriesLuodianInDitu
        // seriesPca
      ];
    }
  }
};
</script>